<template>
  <div>
    <el-card class="his-container" shadow="never" style="margin-top: 20px;margin-bottom: 20px;">
      <div class="title-container">
        <div class="audit-title">{{$t('internship.approvals')}}</div>
        <div v-if="!list">
          <el-button
            v-if="expand"
            type="text"
            icon="el-icon-arrow-up"
            @click="() => {this.showTable = false;this.expand = !expand}">{{$t('HistoryTable.Retract')}}</el-button>
            <el-button
              v-else
              type="text"
              icon="el-icon-arrow-down"
              @click="() => {this.showTable = true;this.expand = !expand}">{{$t('HistoryTable.Open')}}</el-button>
        </div>
      </div>
      <el-table tooltip-effect="light" v-show="this.showTable" stripe :data="tableData" ref="historyTable">
        <el-table-column
          :label="$t('internship.numerical')"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column :label="$t('internProgress.time')">
          <template slot-scope="props">{{props.row.time | formatDate}}</template>
        </el-table-column>
        <el-table-column :label="$t('internProgress.approver')" prop="approvorName"></el-table-column>
        <!-- <el-table-column :label="$t('internProgress.department')" prop="faculty"></el-table-column> -->
        <edu-table-column :label="$t('internProgress.department')" prop="faculty"></edu-table-column>
        <el-table-column :label="$t('internProgress.operate')" prop="result">
          <template slot-scope="scope">
            <div class="is-enabled-container">
              <el-tag v-if="scope.row.result === 'COMMIT'" type="success" round>提交</el-tag>
              <el-tag v-if="scope.row.result === 'Process'" type="success" round>通过</el-tag>
              <el-tag v-if="scope.row.result === 'Reject'" type="danger" round>已驳回</el-tag>
              <el-tag v-if="scope.row.result === 'End'" type="info" round>已结束</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('internProgress.node')" prop="setpId">
          <template slot-scope="scope">
            <div class="is-enabled-container">
            <!-- 0：提交
            1：校外导师审核
            2、导师审核 -->
              <el-tag v-if="scope.row.setpId ==0" >提交</el-tag>
              <el-tag v-if="scope.row.setpId ==1" >校外导师审核</el-tag>
              <el-tag v-if="scope.row.setpId ==2" >导师审核</el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="$t('internProgress.explain')" prop="content"></el-table-column> -->
        <edu-table-column :label="$t('internship.explain')" prop="content"></edu-table-column>
      </el-table>
    </el-card>

  </div>
</template>
<script>
import filters from "common/src/filters";
export default {
  name: 'HistoryTable',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    list: {
      type:String
    }
  },
  data() {
    return {
      showTable: true,
      expand: true //默认展开
    }
  },
  filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },

}
</script>
<style lang="scss">
.his-container {
  .title-container {
    display: flex;
    align-items: center;
    .audit-title {
      font-size: 16px;
    }
  }
}

</style>
